<template>
  <div class="left-top-container">
    <div class="title-section">
      <div class="title-left">告警统计</div>
    </div>
    <div class="total-section">
      <span class="total-label">总数</span>
      <span class="total-count">{{ totalCount }}</span>
    </div>
    <div v-if="pageflag" class="user_Overview">
      <div class="user_Overview-item" style="color: #f5023d" @mouseenter="(show = true), (level = 1)" @mouseleave="show = false">
        <div class="user_Overview_nums laramnum">
          <dv-digital-flop :key="'red-' + alarmStats.redCount" :config="config" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div class="user_Overview-item" style="color: #ffff00" @mouseenter="(show = true), (level = 2)" @mouseleave="show = false">
        <div class="user_Overview_nums online">
          <dv-digital-flop :key="'yellow-' + alarmStats.yellowCount" :config="onlineconfig" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div class="user_Overview-item" style="color: #ff6600" @mouseenter="(show = true), (level = 3)" @mouseleave="show = false">
        <div class="user_Overview_nums offline">
          <dv-digital-flop :key="'orange-' + alarmStats.orangeCount" :config="offlineconfig" style="width: 100%; height: 100%" />
        </div>
      </div>

      <div class="user_Overview-item" style="color: #00fdfa" @mouseenter="(show = true), (level = 4)" @mouseleave="show = false">
        <div class="user_Overview_nums allnum">
          <dv-digital-flop :key="'blue-' + alarmStats.blueCount" :config="laramnumconfig" style="width: 100%; height: 100%" />
        </div>
      </div>
    </div>
    <div v-if="show" class="pop-content">
      <div class="title">{{ obj[level] }}级告警</div>
      <div v-for="item in list.map(item => item.alarmLevel === level)" :key="item" class="pop-item">
        <div>监测点1</div>
        <div>22</div>
      </div>
    </div>
    <Reacquire v-else line-height="200px" @onclick="getData"> 重新获取 </Reacquire>
  </div>
</template>

<script>
import { getAlarmPointLogsPage } from "@/api/xing-bian-screen/deformation-api";
export default {
  filters: {
    numsFilter(msg) {
      return msg || 0;
    }
  },
  props: {
    radarId: {
      type: Number,
      default: 6
    }
  },
  data() {
    const style = {
      fontSize: 18 // 缩小数字字体大小
    };
    return {
      obj: {
        1: "一",
        2: "二",
        3: "三",
        4: "四"
      },
      show: false,
      options: {},
      alarmStats: {
        blueCount: 0,
        yellowCount: 0,
        orangeCount: 0,
        redCount: 0,
        totalCount: 0
      },
      pageflag: false, // 初始为false，等待数据加载
      timer: null,
      config: {
        number: [0],
        content: "{nt}个",
        style: {
          ...style,
          fill: "#f5023d" // 红色数字
        }
      },
      onlineconfig: {
        number: [0],
        content: "{nt}个",
        style: {
          ...style,
          fill: "#FF6600" // 橙色数字
        }
      },
      offlineconfig: {
        number: [0],
        content: "{nt}个",
        style: {
          ...style,
          fill: "#00FF00" // 绿色数字
        }
      },
      laramnumconfig: {
        number: [0],
        content: "{nt}个",
        style: {
          ...style,
          fill: "#3e98ef" // 蓝色数字
        }
      },
      list: [],
      level: 1
    };
  },
  computed: {
    totalCount() {
      return this.alarmStats.totalCount || 0;
    }
  },
  watch: {
    radarId: {
      handler(newRadarId) {
        if (newRadarId) {
          this.getData();
        }
      },
      immediate: false
    }
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        // 获取报警统计数据
        const response = await getAlarmPointLogsPage({
          deptId: 1,
          radarId: this.radarId,
          pageIndex: 1,
          pageSize: 100000 // 设置 pageSize 为 100000
        });

        if (response && response.data && response.data.list) {
          // 根据接口返回的数据结构获取统计数据
          const stats = response.data.list;
          this.list = stats.list;

          this.alarmStats.blueCount = stats.blueCount || 0;
          this.alarmStats.yellowCount = stats.yellowCount || 0;
          this.alarmStats.orangeCount = stats.orangeCount || 0;
          this.alarmStats.redCount = stats.redCount || 0;
          this.alarmStats.totalCount = this.alarmStats.blueCount + this.alarmStats.yellowCount + this.alarmStats.orangeCount + this.alarmStats.redCount;

          this.updateDisplayData();
          this.pageflag = true;

          console.log("告警统计数据更新:", {
            蓝色: this.alarmStats.blueCount,
            黄色: this.alarmStats.yellowCount,
            橙色: this.alarmStats.orangeCount,
            红色: this.alarmStats.redCount,
            总数: this.alarmStats.totalCount
          });
        } else {
          this.pageflag = false;
          console.warn("接口返回数据格式不正确:", response);
        }
      } catch (error) {
        console.error("获取报警数据失败:", error);
        this.pageflag = false;
      }
    },

    updateDisplayData() {
      // 更新数字翻牌器的数据 - 修复颜色映射
      this.$set(this.config, "number", [this.alarmStats.redCount]); // 红色区域显示红色数据
      this.$set(this.onlineconfig, "number", [this.alarmStats.yellowCount]); // 黄色区域显示黄色数据
      this.$set(this.offlineconfig, "number", [this.alarmStats.orangeCount]); // 橙色区域显示橙色数据
      this.$set(this.laramnumconfig, "number", [this.alarmStats.blueCount]); // 蓝色区域显示蓝色数据

      // 强制更新组件
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss" scoped>
.left-top-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: transparent;
  border-radius: 8px;
}

.title-section {
  /* padding: 15px 20px 10px 20px; */
}

.title-left {
  color: white;
  font-size: 18px;
  font-weight: bold;
  background-image: url("../../../assets/xing-bian-screen/img/biaoti.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px; /* 进一步增加左边距 */
  height: 50px; /* 进一步增加高度 */
  line-height: 50px; /* 对应调整行高 */
  width: calc(100% - 60px); /* 与调整后的total-section宽度一致 */
  margin: 0 30px; /* 与total-section的左右边距保持一致 */
}

.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 100, 150, 0.3); /* 调整背景颜色使其更浅 */
  padding: 10px 20px;
  margin: 10px 30px 15px 30px; /* 增加左右边距 */
  border-radius: 5px;
  width: calc(100% - 60px); /* 减小宽度，对应增加的边距 */
}

.total-label {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.total-count {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.user_Overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px; /* 进一步缩小图之间的距离 */
  padding: 0 10px 10px 10px; /* 取消边距，减少内边距 */
  margin-top: 0;

  .user_Overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .user_Overview_nums {
      width: 130px; /* 增大第四个图表的宽度 */
      height: 100px; /* 增大第四个图表的高度 */
      line-height: 100px;
      text-align: center;

      font-size: 18px;
      margin: 0px auto;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }

      // 确保数字显示在背景图之上
      > div {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: -20px;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../../assets/xing-bian-screen/img/blue.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../../assets/xing-bian-screen/img/yellow.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../../assets/xing-bian-screen/img/green.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../../assets/xing-bian-screen/img/red.png");
      }
    }
  }
}
.pop-content {
  position: absolute;
  width: 250px;
  left: 600px;
  background: rgba(55, 53, 55, 0.5);
  top: 150px;
  padding: 8px;
  height: 300px;
  overflow-y: auto;
  .title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    height: 30px;
    background: #0b2f79;
    line-height: 30px;
  }
  .pop-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
}
</style>
